<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	<style type="text/css">
		body,
		html {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0;
			font-family: "微软雅黑";
		}

		#allmap {
			width: 100%;
			height: 100%;
		}

		.queryContainer {
			text-align: center;
			line-height: 50px;
			width: 300px;
			height: 50px;
			background: #1e9ee9;
			border-radius: 15px;
			opacity: 0.8;
			left: 80px;
			top: 20px;
			position: absolute;
		}
	</style>
	<script type="text/javascript" src="//api.map.baidu.com/api?v=2.0&ak=你的密钥"></script>
	<title>百度地图demo</title>
</head>

<body>
	<div id="allmap"></div>
	<div class="queryContainer">
		<label for="city">城市名: </label><input type="text" name="city" id="city" onkeydown="isSubmit(event)">
		<button onclick="locating()">定位</button>
	</div>
</body>

</html>
<script type="text/javascript">
	let map = new BMap.Map("allmap");    // 创建Map实例
	//添加地图类型控件
	map.addControl(new BMap.MapTypeControl({
		// 共有三种类型，基本，卫星和混合（基本+卫星）
		mapTypes: [
			BMAP_NORMAL_MAP,
			BMAP_HYBRID_MAP,
			BMAP_SATELLITE_MAP
		]
	}));
	map.setCurrentCity("南京");          // 设置地图显示的城市 此项是必须设置的
	map.enableScrollWheelZoom(true);     //开启鼠标滚轮缩放

	// 定位方式:
	// 根据经纬度进行定位
	map.centerAndZoom(new BMap.Point(118.797248, 32.025476), 18);

	// 根据城市名进行定位 
	function locating() {
		let cityName = document.getElementById('city').value
		if (cityName && cityName != '') {
			// 根据城市名进行定位
			map.centerAndZoom(cityName, 10)
		}
	}

	function isSubmit(e){
		console.log(e);
		if(e && e.keyCode == 13){
			locating()
		}
	}
	
</script>